<!-- 使用 type="home" 属性设置首页 -->
<route type="home" lang="json">
{
  "layout": "tabbar",
  "style": { "navigationBarTitleText": "" },
  "name": "wardrobe"
}
</route>
<script setup lang="ts">
import shangyi from '@/static/上衣.png';
import kuzi from '@/static/长裤.png';
import xiezi from '@/static/运动鞋.png';
import peishi from '@/static/皮带配饰.png';
// 定义 tabs 数据
const current = ref<number>(0);

const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]);
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
</script>

<template>
  <view class="contain">
    <wd-swiper
      :list="swiperList"
      autoplay
      v-model:current="current"
      @click="handleClick"
      @change="onChange"
    ></wd-swiper>
    <view style="margin: 12px 0">我的衣橱</view>
    <wd-grid :column="2">
      <wd-grid-item use-icon-slot text="上衣" icon-size="36px">
        <template #icon>
          <image class="slot-img" :src="shangyi" />
        </template>
      </wd-grid-item>
      <wd-grid-item use-icon-slot text="裤子" icon-size="36px">
        <template #icon>
          <image class="slot-img" :src="kuzi" />
        </template>
      </wd-grid-item>
      <wd-grid-item use-icon-slot text="鞋袜" icon-size="36px">
        <template #icon>
          <image class="slot-img" :src="xiezi" />
        </template>
      </wd-grid-item>
      <wd-grid-item use-icon-slot text="内衣" icon-size="36px">
        <template #icon>
          <image class="slot-img" :src="peishi" />
        </template>
      </wd-grid-item>
    </wd-grid>
    <!--    <view> 配饰区 </view>-->
    <!--    暂无配饰-->
  </view>
</template>

<style scoped>
.contain {
  padding: 20rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f8f9fa;
}
.slot-img {
  height: 36px;
  width: 36px;
  border-radius: 4px;
}
</style>
